<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数节流</title>
    <style>
        body {
            display: flex;
            justify-content: ;
        }
    </style>
</head>

<body>
    <h4>函数节流实现</h4><input type="text">
    <div class="show"></div>
</body>
<script>
    var input = document.getElementsByTagName('input')[0];
    input.addEventListener('keyup', function() {
            throttle(doSearch, window, this.value, 500, 2000)
        }

    )

    function doSearch(searchText) {
        var p = document.createElement('p');

        p.innerText = '当前搜索内容： ' + searchText;
        document.getElementsByClassName('show')[0].appendChild(p)
    }

    // (调用方法, 方法所属对象, 自动执行时间, 最大延迟执行时间 ))
    function throttle(fn, context, searchText, autoDoTime, delay) {
        clearTimeout(fn.timer) // 记录当前时间
        fn.currentTime = Date.now() // 若该函数是第一次调用，则直接设置startTime,即开始时间，为currentTime，即此刻的时间
        if (!fn.startTime) {
            fn.startTime = fn.currentTime
        }
        // 大于等于自动执行时间，调用方法
        if (fn.currentTime - fn.startTime >= autoDoTime) {
            fn.call(context, searchText) fn.startTime = fn.currentTime
        } else {
            // 大于最大延迟时间，调用方法
            fn.timer = setTimeout(function() {
                fn.call(context, searchText)
            }, delay)
        }
    }
</script>

</html>